<template>
    <div class="login-box">
        <v-toolbar color="blue-grey lighten-5" class="title-box">
            <v-icon class="material-icons" @click="$router.back(-1)">arrow_back</v-icon>
            <v-toolbar-title class="white--text title-text"></v-toolbar-title>
        </v-toolbar>
        <div class="login-box-inside">
            <div class="facebook-btn"  @click="faceBookLogin">
                <!--<i :style="{backgroundImage: 'url(' + require('../../static/img/fb-icon.png') + ')'}" class="facebook-icon"></i>-->
                <span class="icon" :style="facebookIcon"></span>
                <span class="buttonText">Facebook</span>
            </div>
            <div id="customBtn">
                <span class="icon" :style="googleIcon"></span>
                <span class="buttonText">Google</span>
            </div>
            <div class="email-btn">
                <router-link to="./loginEmail">Email</router-link>
            </div>
        </div>
    </div>
</template>

<script>
    let googleUser = {}
    export default {
        name: 'login',
        data() {
            return {
                googleIcon: {
                    backgroundImage: "url(" + require("../../static/img/g-normal.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundPositionX: "center",
                    backgroundPositionY: "center",
                },
                facebookIcon: {
                    backgroundImage: "url(" + require("../../static/img/fb-icon.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundPositionX: "center",
                    backgroundPositionY: "center",
                },
            }
        },
        methods: {
            initGoogleBtn () {
                window.gapi.load('auth2', () => {
                    // Retrieve the singleton for the GoogleAuth library and set up the client.
                    window.auth2 = window.gapi.auth2.init({
                        client_id: '507444282297-5u5n4inhbpd4v77c21efv950972hv06f.apps.googleusercontent.com',
                        cookiepolicy: 'single_host_origin',
                    });
                    this.attachSigninWithGoogle(document.getElementById('customBtn'));
                });
            },
            attachSigninWithGoogle(element) {
                auth2.attachClickHandler(element, {},
                    function(googleUser) {
                        console.log(googleUser.getBasicProfile().getName())
                    }, function(error) {
                        console.log(JSON.stringify(error, undefined, 2))
                    });
                // auth2.attachClickHandler(element, {}, this.onSuccess(googleUser), this.onFailure(e));
            },
            // 谷歌登录成功后回调函数
            onSuccess(googleUser) {
                var googleId = googleUser.getBasicProfile().getId()
                var name = googleUser.getBasicProfile().getName()
                var email = googleUser.getBasicProfile().getEmail()
                let data = {
                    'googleId': googleId,
                    'googleName': name,
                    'googleEmail': email
                }
                let params = Qs.stringify(data)
                loginWithGoogle(params).then((res) => {
                    if (res.data) {
                        let data = res.data
                        if (data.errorID === 0) {
                            localStorage.setItem('username', data.object.googleName)
                            localStorage.setItem('developerId', data.object.id)
                            localStorage.setItem('account', data.object.account)
                            this.$store.commit('updateUserName', data.object.googleName)
                            this.$store.commit('updateDeveloperId', data.object.id)
                            this.$store.commit('updateAccount', data.object.account)
                            this.signOutGoogle()
                            this.$router.push('/main')
                        } else {
                            console.log(data.errorID)
                            this.showToast(data.errorID)
                        }
                    }
                }).catch((error) => {
                    console.log(error)
                    this.messageToastErr('error,please try again leter')
                })
            },
            // 谷歌登录失败回调函数
            onFailure (e) {
                console.log("Google login error~")
                this.messageToastErr('error,please try again leter')
            },
            // FaceBook 登錄按鈕初始化
            // 調用FaceBook登錄按鈕
            faceBookLogin () {
                window.FB.login((response) =>{
                    this.statusChangeCallback(response)
                },{scope: 'email'});
            },
            statusChangeCallback (response) {
                if (response.status === 'connected') {
                    FB.api('/me?fields=name,email',(response) => { // /me为API指定的调用方法，用于获取登陆用户相关信息
                        if(response.email!=null){
                            this.loginWithFaceBookLast(response)
                        }else{
                            this.messageToastErr('error,please try again leter')
                        }
                    })
                }
            },
        },
        mounted() {
            this.initGoogleBtn()
        }
    };
</script>
<style>
    .login-box .title-box{
        background: #f2f2f2;
    }
    .login-box .title-box.toolbar{
        box-shadow: none;
        color:#444;
    }
    .login-box .title-box .title-text{
        color:#444!important;
        margin:0 auto!important;
        padding-right:46px;
    }
    .login-box-inside{
        padding:12px 16px 0 16px;
    }
    #customBtn {
        background: white;
        color: #444;
        border-radius: 5px;
        border: thin solid #888;
        white-space: nowrap;
        margin-top:12px;
    }
    #customBtn:hover {
        cursor: pointer;
    }
    span.label {
        font-family: serif;
        font-weight: normal;
    }
    span.icon {
        display: inline-block;
        vertical-align: middle;
        width: 42px;
        height: 42px;
        float: left;
    }
    span.buttonText {
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
        font-family: 'Roboto', sans-serif;
        display: block;
        padding:0 43px;
        height: 42px;
        line-height:42px;
        text-align: center;
    }
    .facebook-btn{
        background-color: #3b5998;
        border:1px solid #3b5998;
        color:#fff;
        position: relative;
        border-radius: 5px;
    }
    .facebook-btn:hover{
        background-color: #5477c0;
        border:1px solid #5477c0;
        color:#fff;
    }
    .email-btn{
        width:100%;
        margin:0;
        height: 42px;
        border-radius: 5px;
        border: thin solid #888 !important;
        text-transform:none !important;
        color:#444 !important;
        margin-top:12px;
        font-weight: 400;
    }
    .email-btn a{
        display: block;
        height: 40px;
        line-height: 40px;
        text-decoration: none;
        color: #444;
        text-align: center;
    }
</style>
